<template>
    <div>
        <van-nav-bar v-if="bookNumber == 0" title="创建商品" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-nav-bar v-if="bookNumber != 0" title="修改商品" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-field label="商品名" v-model="book.name" />
        <!-- <van-field label="商品简介" v-model="book.summary" /> -->
        <van-field label="商品简介" autosize type="textarea" v-model="book.summary" maxlength="500" show-word-limit />
        <van-field label="商品图片" v-model="pictureUrl" />
        <img v-if="bookNumber != 0" :src="pictureUrl" height="100%" width="100%">
        <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="1" />
        <!-- </van-sticky> -->
        <van-field label="商品价格" v-model="book.bookPrice" />
        <van-button round block type="info" @click="onSubmit">
            提交
        </van-button>
        <div style="height:40px"></div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import axios from "axios";
export default {
    data() {
        return {
            bookNumber: 0,
            book: {
                name: "",
                summary: "",
            },
            pictureUrl: "",
            fileList: []
        }
    },
    mounted() {
    },
    methods: {
        onClickLeft() {
            // Toast('返回');
            this.$router.go(-1);//返回上一层
        },
        async afterRead(file) {
            // 此时可以自行将文件上传至服务器
            // 因为是上传的data文件,所以要有true标示
            let res = await this.$http.addPicture(file, true)
            //    window.console.log(res);
            if (res !== undefined && res.meta.status == 200) {
                this.pictureUrl = axios.defaults.baseURL + res.data[0]
                Toast('上传成功!');
            }
        },
        async onSubmit() {
            this.book.pictureUrl = this.pictureUrl
            if (this.bookNumber == 0) {
                let res = await this.$http.addBook(this.book)
                if (res !== undefined && res.meta.status == 200) {
                    Toast('创建成功');
                    this.book = {
                        summary: ""
                    }
                    this.pictureUrl = ""
                    this.fileList = []
                }            }
            else {
                let res = await this.$http.editBook(this.book)
                if (res !== undefined && res.meta.status == 200) {
                    Toast('修改成功');
                }
            }
        },
        async getData(bookNumber) {
            if (bookNumber != undefined) {
                this.bookNumber = bookNumber
                let res = await this.$http.getBookById(bookNumber)
                res.data.creationTime = null
                res.data.buyerNumber = null
                res.data.founder = null
                res.data.buyerTime = null
                res.data.status = null

                this.book = res.data
                this.pictureUrl = res.data.pictureUrl
            }
            else
                this.bookNumber = 0

        },
    },
    // 当页面进入时
    beforeRouteEnter(to, from, next) {
        //   window.console.log("你进入了正文页"); // undefined
        //    window.console.log(this); //undefined，不能用this来获取vue实例
        //  window.console.log('组件路由钩子：beforeRouteEnter');
        next(vm => {
            //    window.console.log(vm); //vm为vue的实例
            //    window.console.log("参数为" + vm.$route.query.id)
            vm.getData(vm.$route.query.id)
            // else
            //     vm.getData(0)
            // if (vm.$route.query.findString != undefined)
            //     vm.getData2(vm.$route.query.findString)
            //    vm.getData2(vm.$route.query.findString)
            //    window.console.log('组件路由钩子beforeRouteEnter的next');
        });
    },
}




</script>

<style >
</style>